<template>
  <div class="container">
    <div class="title">
      <h2>管理员管理</h2>
      <h5>一个管理员可以有多个角色组,左侧的菜单根据管理员所拥有的权限进行生成</h5>
    </div>
    <!-- 标题 -->
    <el-card class="box-card">
      <el-form :model="formData" class="demo-form-inline">
        <!-- 用户名 -->
        <el-form-item prop="username" label="用户名" size="small" style="margin-right: 23px;width:233px">
          <el-input v-model="formData.username" />
        </el-form-item>
        <!-- 昵称 -->
        <el-form-item prop="nickname" label="昵称" size="small" style="margin-right: 23px;width:233px">
          <el-input v-model="formData.nickname" />
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item prop="phone" label="手机号" size="small" style="margin-right: 23px;width:233px">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <!-- 状态 -->
        <el-form-item prop="status" label="状态" size="small" style="margin-right: 23px;">
          <el-select v-model="formData.status" placeholder="请输入" style="margin-right: 0px;width:233px">
            <el-option label="关闭" value="0" />
            <el-option label="开启" value="1" />
          </el-select>
        </el-form-item>
        <!-- 时间 -->
        <el-form-item prop="create_time" label="创建时间" size="small" style="margin-right: 0px;">
          <div class="block">
            <el-date-picker
              v-model="formData.create_time"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </div>
        </el-form-item>
        <el-form-item class="btn" style="margin-right: 0px;width:233px;padding-top: 30px;">
          <el-button style="float: right; padding: 10px 20px;" type="primary" @click="getInquireApi(formData)">查询</el-button>
          <el-button style="float: right; padding: 10px 20px;margin-right:10px" @click="getInquireApi()">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <!-- 表格 -->
    <el-card class="tableCard">
      <el-button style="float: right; padding: 10px 20px;margin-right:80px" type="primary" size="small" :disabled="!checkBtnPermission('/auth/user', 'create')" @click="newlyEdit()">新增管理员</el-button>
      <el-table
        :data="formList"
      >
        <el-table-column
          prop="id"
          label="ID"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
        />
        <el-table-column
          prop="nickname"
          label="昵称"
        />
        <el-table-column
          label="头像"
        >
          <template slot-scope="{row}">
            <img :src="imgUrl(row.avatar)" alt="" style="width:34px">
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
        />
        <el-table-column
          prop="email"
          label="Email"
        />
        <el-table-column
          label="角色名"
          width="250"
        >
          <template slot-scope="{row}">
            <el-button v-for="(item,index) in row.roleList" :key="index" type="success" plain size="small">
              {{ item.name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="50"
        >
          <template slot-scope="{row}">
            {{ row.status === 1? '启用' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
        >
          <template slot-scope="{row}">
            {{ row.create_time }}
          </template>
        </el-table-column>

        <el-table-column label="编辑">
          <template slot-scope="{row}">
            <el-button type="text" size="small" :disabled="!checkBtnPermission('/auth/user', 'update')" @click="newlyEdit(row.id)">编辑</el-button>
            <el-button type="text" size="small" :disabled="!checkBtnPermission('/auth/user', 'destroy')" @click="getDelApi(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <!-- 新增 / 编辑  -->
    <UserHead ref="UserHead" />
  </div>

</template>

<script>
import UserHead from '@/views/auth/components/user-head.vue'
import { getInquireApi, getIdApi, getDelApi } from '@/api/auth-user.js'
import { timestampTime } from '@/utils/index'
export default {
  name: 'User',
  components: {
    UserHead
  },
  data() {
    return {
      // 查询
      formData: {
        username: '',
        nickname: '',
        phone: '',
        status: '',
        create_time: []
      },
      // 渲染列表
      formList: []

    }
  },
  computed: {

  },
  created() {
    this.getInquireApi()
  },
  mounted() {

  },

  methods: {
    // 删除
    async getDelApi(id) {
      await this.$confirm('确认删除？')
      await getDelApi(id)
      this.$message.success('删除成功')
      this.getInquireApi()
    },
    // 新增 / 便捷 打开逻辑
    async  newlyEdit(id) {
      this.$refs.UserHead.drawer = true
      if (id) {
        // 编辑
        this.$refs.UserHead.text = '修改管理员'
        const res = await getIdApi(id)
        console.log(res.data.data)
        // 回显的时候将返回的roles变成数组
        // 转一下Number,因为下拉框回显是对比的Number类型
        res.data.data.roles = res.data.data.roles.split(',').map(item => item * 1)
        // 回显头像
        this.$refs.UserHead.fileList = [{ url: `http://124.223.14.236:8881${res.data.data.avatar}` }]
        this.$refs.UserHead.form = res.data.data
      } else {
        // 新增
        this.$refs.UserHead.text = '新增管理员'
      }
    },
    // 拼接图片地址
    imgUrl(url) {
      // http://124.223.14.236:8881/public/upload/user/2022-12-09/1670570744950860.png
      return `http://124.223.14.236:8881${url}`
    },
    // 发送请求渲染页面
    async getInquireApi(data) {
      // 如果查询的话把时间转为时间戳
      // 如果有data的话转一下时间戳
      if (data) {
        // 第二次查询因为已经转字符串啦再转会报错，所以判断是不是数组，是数组再把数组时间戳转为字符串
        if (data.create_time instanceof Array) {
          const time = []
          data.create_time.forEach(item => {
            time.push(Date.parse(item))
          })
          // 再将数组中时间戳转换成字符串
          data.create_time = time.toString()
        }
      } else {
        this.formData = {
          username: '',
          nickname: '',
          phone: '',
          status: '',
          create_time: []
        }
      }
      // 发送请求
      const res = await getInquireApi(data)
      // 时间戳转换时间
      timestampTime(res.data.data)

      this.formList = res.data.data
    }

  }
}
</script>

<style lang="scss" scoped>

.container{
  padding:40px;
  .title{
  display: flex;
  align-items: center;
  h2{

    margin-right:20px;
  }
  h5{

    font-weight: 400;
    color:#9c9c9d;
    vertical-align: middle;
  }
}
.demo-form-inline{
  display: flex;
}
.el-form-item{
  margin-right:73px;
}
.btn{
  padding-top:40px;
}
.box-card{
  margin-bottom:10px;
}
}

</style>

